<template>
  <!-- 弹窗组件 -->
  <el-dialog title="提示" :visible.sync="dialogVisible001" width="30%" :before-close="handleClose">
    <!-- 查看 -->
    <div v-if="sign==='examine'">
      <div v-for="(item,index) in examineData001" :key="index">
        <div v-if="standardData[item.EN]">
          <span>{{standardData[item.EN]}}:</span>
          <span>{{item.values}}</span>
        </div>
      </div>
    </div>
    <!-- 编辑 -->
    <div v-else-if="sign==='update'">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          v-for="(item,index) in updateData002"
          :key="index"
          :label="item.CN"
          :prop="item.EN"
          v-if="item.type==='input'"
        >
          <el-input v-model="item.value"></el-input>
        </el-form-item>
        <el-form-item
          v-for="(item,index) in updateData002"
          :key="index"
          :label="item.CN"
          :prop="item.EN"
          v-if="item.type==='date'"
        >
          <el-date-picker v-model="item.value" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>
        <!-- <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item> -->
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="mini" @click="resetForm('ruleForm')">取 消</el-button>
      <el-button size="mini" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      //弹窗开关
      dialogVisible001: false,
      //查看的字典
      standardData: {},
      //查看数据
      examineData001: [],
      //标记 'examine'=查看、'update'=修改/类型string
      sign: undefined,

      // 修改的数据......................................................
      //渲染的数据
      updateScopeRow002: {},
      //修改功能的数据属性
      updateData002: [],
      //修改功能的字典
      updateStandardData002: {},
      //修改的表单数据
      ruleForm: {
        name: ""
      },
      //表单校验
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    //查看组件回调
    this.$bus.on("todialogCom0001", (examineScopeRowClone, standardData) => {
      console.log(examineScopeRowClone);
      console.log(standardData);
      //打开弹窗
      this.dialogVisible001 = true;
      //标记查看
      this.sign = "examine";
      //赋值查看字典
      this.standardData = standardData;
      //组装数据格式：[{parentName:"父租户名"},{childrenName:"子租户名"}...]
      this.examineData001 = [];
      let keys = Object.keys(examineScopeRowClone);
      let values = Object.values(examineScopeRowClone);
      for (let i = 0; i < keys.length; i++) {
        let obj = {};
        obj.EN = keys[i];
        obj.values = values[i];
        // obj[keys[i]]=values[i]
        this.examineData001.push(obj);
      }
    });
    //编辑组件回调
    this.$bus.on(
      "todialogCom0002",
      (updateScopeRow, updateData, updateStandardData) => {
        //打开弹窗
        this.dialogVisible001 = true;
        //标记查看
        this.sign = "update";
        //赋值
        [
          this.updateScopeRow002,
          this.updateData002,
          this.updateStandardData002
        ] = JSON.parse(
          JSON.stringify([updateScopeRow, updateData, updateStandardData])
        );
        //编辑显示信息
        // console.log(updateScopeRow);
        // console.log(updateData);
        // console.log(updateStandardData);
        for (let i = 0; i < this.updateData002.length; i++) {
          // this.updateScopeRow002[this.updateData002[i].EN]
          // let val__=this.updateScopeRow002[this.updateData002[i].EN]
          // console.log(val__)
          for (let j = 0; j < Object.keys(this.updateScopeRow002).length; j++) {
            if (this.updateData002[i].EN == Object.keys(updateScopeRow)[j]) {
              this.updateData002[i].value = Object.values(updateScopeRow)[j];
            }
          }
        }
        console.log(this.updateData002);
      }
    );
  },
  methods: {
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    //表单
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
          this.dialogVisible001 = false
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible001 = false
    }
  }
};
</script>